<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>DataGridBuilder</title>

    <!-- Bootstrap -->
    <link href="{{static_url('todc-bootstrap/css/bootstrap.min.css')}}" rel="stylesheet">
    <!-- TODC Bootstrap theme -->
    <link href="{{static_url('todc-bootstrap/css/todc-bootstrap.min.css')}}" rel="stylesheet">
    <link href="{{static_url('todc-bootstrap/css/select2.css')}}" rel="stylesheet">
    <link href="{{static_url('js/highlight/styles/github.css')}}" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="{{static_url('js/html5shiv.min.js')}}"></script>
    <script src="{{static_url('js/respond.min.js')}}"></script>
    <![endif]-->
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <button type="button" class="btn btn-default" id="new_db_conn_btn" data-toggle="modal" data-target="#myModal">
            新增连接
        </button>
        <select id="db_cnn_names" style="width: 100px;">
        </select>
        <select id="db_tables" style="width: 100px;">
        </select>
    </div>

    <div class="row">
        <form id="table_meta_form" method="post">
        <div class="col-md-4">
            排除列
            <ul id="exclude_columns_panel" style="height:150px;overflow-y:auto;">
            </ul>
        </div>
        <div class="col-md-4">
            搜索列
            <ul id="search_columns_panel" style="height:150px;overflow-y:auto;">
            </ul>
        </div>
        <div class="col-md-4">
            排序列
            <ul id="order_columns_panel" style="height:150px;overflow-y:auto;">
            </ul>
        </div>
            <input type="hidden" id="current_table_name" name="current_table_name"/>
            <input type="hidden" id="action_table" name="action" value=""/>
        </form>
    </div>
    <div class="row">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#wordpress" aria-controls="wordpress" role="tab" data-toggle="tab">WordPress</a>
            </li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="wordpress">
                <div>
                    <button type="button" class="btn btn-default" id="wp_table_preview">预览</button>
                </div>
                <div class="row">
                    <textarea id="wp_code" class="col-md-11" rows="30"></textarea>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">新增数据库连接</h4>
            </div>
            <div class="modal-body">
                <form id="db_conn_form">
                    <div class="form-group">
                        <label for="db_conn_name">连接名称</label>
                        <input type="text" class="form-control" id="db_conn_name" name="db_conn_name"
                               placeholder="连接名称">
                    </div>
                    <div class="form-group">
                        <label for="db_type">数据库类型</label>
                        <select id="db_type" class="select2 form-control" name="db_type">
                            <option value="pymysql">MySQL</option>
                            <option value="pymssql">MSSQL</option>
                            <option value="cx_oracle">Oracle</option>
                            <option value="psycopg2">Postgres</option>
                            <option value="sqlite">SQLite</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="db_host">主机</label>
                        <input type="text" class="form-control no-file-db" name="db_host" id="db_host" placeholder="主机"
                               value="127.0.0.1">
                    </div>
                    <div class="form-group">
                        <label for="db_port">端口</label>
                        <input type="number" class="form-control no-file-db" name="db_port" id="db_port"
                               placeholder="端口">
                    </div>
                    <div class="form-group">
                        <label for="db_user">用户名</label>
                        <input type="text" class="form-control no-file-db" name="db_user" id="db_user"
                               placeholder="用户名">
                    </div>
                    <div class="form-group">
                        <label for="db_pwd">密码</label>
                        <input type="text" class="form-control no-file-db" name="db_pwd" id="db_pwd" placeholder="密码">
                    </div>
                    <div class="form-group">
                        <label for="db_name">数据库名</label>
                        <input type="text" class="form-control" id="db_name" name="db_name" placeholder="数据库名">
                        <p class="help-block">SQLite 填写数据库文件路径</p>
                    </div>
                    <input name="action" id="action" value="dsn_save" type="hidden"/>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="save_db_conn_info_btn">保存</button>
            </div>
        </div>
    </div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{{static_url('js/jquery-1.12.4.min.js')}}"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{{static_url('todc-bootstrap/js/bootstrap.min.js')}}"></script>
<script src="{{static_url('todc-bootstrap/js/select2.min.js')}}"></script>
<script src="{{static_url('js/highlight/highlight.pack.js')}}"></script>
<script src="{{static_url('js/common-tools.js')}}"></script>
</body>
</html>